<mat-card class="p-5">
@if (agentDetails()?.memory) {
  @for (entry of agentDetails()?.memory | keyvalue; track entry.key) {
    <mat-expansion-panel 
                         (opened)="toggleExpansion(entry.key)" 
                         (closed)="toggleExpansion(entry.key)"
                         [expanded]="memoryExpanded()[entry.key]">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{ entry.key }}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <!-- Use [innerHTML] to render <br/> tags and remove white-space style 
      <div [innerHTML]="convertMemoryValue(entry.value)"></div>-->

      <markdown
          mermaid
          clipboard
          [clipboardButtonComponent]="clipboardButton"
          [data]="entry.value"
      ></markdown>
    </mat-expansion-panel>
  }
}
</mat-card>
